body{
    background-color: rgb(32, 31, 31);
}
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    perspective: 800px; /* 指定透视视角 */
    overflow: hidden; /* 隐藏超出容器的部分 */
  }
#background{
    display: inline;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../../public/img/table.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    transform-style: preserve-3d;
    /* transform: rotateX(30deg) rotateY(0deg) translateZ(0px);   */

}
/* 左右 */
#left{
    position: absolute;
    width: 3%;
    height:30%;
    left:28%;
    top:20%;
    
    display: inline-block;
    padding: 4% 0;
}
#right{
    position: absolute;
    width: 3%;
    height:30%;
    right:27%;
    top:20%;
    
    display: inline-block;
    padding: 4% 0;
    
}
/* 最上面 */
#top{
    position: absolute;
    width: 27%;
    height:6%;
    top:5%;
    right:35%;
    
    display: inline;
}
/* 最下面 */
#bottom {
    position: absolute;
    width: 27%;
    height:6%;
    bottom:6%;
    right:37%;
    
    display: inline;
}

.top-tile {
    float: right;
    margin-bottom: 0;
    width: 6%;
    height: 100%;
}
.bottom-tile{
    width: 6%;
    height: 100%;
    margin-right: 0px;
    margin-bottom: 5px;
    float: left;
    cursor: pointer;
}
.left-tile{
    vertical-align: top;
    width: 51%;
    height:25%;
    margin-top: -90%;
}
.right-tile{
    vertical-align: bottom;
    width: 51%;
    height:25%;
    margin-top: -90%;
}
.button-with-image {
    display: inline;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    outline: none;
    cursor: pointer;
    opacity: 0.5;
}
.clear {
    clear: both;
}
/* 点击后麻将移动 */
.move{ 
    position: relative;
    bottom:20px;
}
.info{
    width: 160px;
    height: 90px;
    background-size: contain;
    background-image: url("../../../public/img/info.png");
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px;
    font-size: 20px;   
}
.info a{
    position: absolute;
    width: auto;
    margin: 10px auto;
}
#bottom .info{
    float: right;
}
.buttonContainer{
    position: absolute;
    width: 30%;
    height:10%;
    bottom: 11%;
    right:35%;
    
}
.buttonContainer img{
    float: left;
    width: 20%;
    height: 70%;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.buttonContainer img:hover{
    transform: scale(1.2);
}

.topContainer{
    position: absolute;
    width:8%;
    left:28%;
    top:5%;
    height: 15%;
    
}
.leftContainer{
    position: absolute;
    
    width:7%;
    height: 15%;
    left:28%;
    bottom: 6%;

}
.rightContainer{
    position: absolute;
    
    width:7%;
    height: 15%;
    right:28%;
    top:5%;

}
.bottomContainer{
    position: absolute;
    bottom:6%;
    width:7%;
    right:28%;
    height: 18%;
    
}

#mid{
    position: absolute;
    width: 10%;
    height: 24%;
    top:38%;
    left:45%;
    
    background-image: url("../../../public/img/bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#mid img{
    position: absolute;
    width: 11%;
    height:6%;
    left:36%;
    top:55%;
}
